<template>
  <div id="algorithm">
    <div class="tab">
      <!-- <tab :eltabs="this.eltabs" @tabIndex="showTab"></tab> -->
      
      <navMenu @tabIndex="showTab_navmenu"></navMenu>
    </div>
    <div class="analysis">
      <div class="descript">
        <!-- <h3><i class="fa fa-tags"></i>&nbsp;算法说明</h3> -->
        <el-divider content-position="left">算法说明</el-divider>
        <div v-for="(value, key) in explain" :key="value" class="miao">
          <p><i class="fa fa-info-circle"></i>&nbsp;<b>{{ key }}：</b></p><span>{{ value }}</span>
        </div>
      </div>
      <div class="result">
        <!-- <h3><i class="fa fa-tags"></i>&nbsp;数据分析</h3> -->
        <!-- <el-divider content-position="left">数据导入</el-divider> -->
        <div class="option">
          <!-- <b style="font-size: 0.18rem;">数据导入：</b> -->
          <el-divider content-position="left">数据导入</el-divider>
          <el-upload
            v-show="this.activeIdx == '1-1'"
            action=""
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            style="display: inline-block;margin-left: 0.3rem;float: left;"
            :multiple="false"
            :show-file-list="true"
            :on-change="(params) => httpRequest(params,'1-1')"
            ref="upload"
          >
            <el-button size="medium" type="primary"><i class="el-icon-upload"></i>&nbsp;过程</el-button>
          </el-upload>
          <el-upload
            v-show="this.activeIdx == '1-1'"
            action=""
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            style="display: inline-block;margin-left: 0.3rem;float: left;"
            :multiple="false"
            :show-file-list="true"
            :on-change="(params) => httpRequest(params,'2')"
            ref="upload2"
          >
            <el-button size="medium" type="primary"><i class="el-icon-upload"></i>&nbsp;质检</el-button>
          </el-upload>
          <el-upload
            v-show="this.activeIdx == '2' || this.activeIdx == '3' || this.activeIdx == '1-2'"
            class="upload-demo"
            action=""
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            style="display: inline-block;margin-left: 0.3rem;float: left;"
            :multiple="false"
            :show-file-list="true"
            :on-change="httpRequest"
            ref="upload3"
          >
            <el-button size="medium" type="primary"><i class="el-icon-upload"></i>&nbsp;数据上传</el-button>
          </el-upload>
          <!-- <el-radio-group v-model="dataIptRadio" size="small">
            <el-radio border :label="1">过程</el-radio>
            <el-radio border :label="2">质检</el-radio>
          </el-radio-group> -->
          <el-button size="medium" type="primary" @click="clickImg" style="margin-left: 0.3rem;float: left;margin-bottom: 0.1rem;">查看导入样例</el-button>
          <img v-if="showImg1" :src="imgSrc1" id="img" style="display: block;margin: 0.1rem auto;">
          <div v-if="showImg1_2" style="display: block;margin: 0.1rem auto;width: 100%;overflow-x: scroll;">
            <img :src="imgSrc1_2" id="">
          </div>
          <div v-if="showImg1" style="display: block;margin: 0.1rem auto;width: 100%;overflow-x: scroll;">
            <img :src="imgSrc2" id="img">
          </div>
          <div v-if="showImg2" style="display: block;margin: 0.1rem auto;width: 100%;overflow-x: scroll;">
            <img :src="imgSrc3" id="img">
          </div>
        </div>
        <div class="option">
          <!-- <b style="font-size: 0.18rem;">参数设置：</b> -->
          <el-divider content-position="left">参数设置</el-divider>
          
          <div class="result-1" style="margin-left: 0.3rem;" v-show="this.activeIdx == '1-1'">
            <span>参考队列——</span>
            <el-select v-model="param1" placeholder="请选择" @change="changeBehindSel">
              <el-option
                v-for="item in options"
                :key="item.value + Math.random()"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="display: inline-block;margin-left: 0.2rem;">比较队列——</span>
            <el-select v-model="param2" placeholder="请选择" @change="changeCompareSel">
              <el-option
                v-for="item in options2"
                :key="item.value + Math.random()"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="display: inline-block;margin-left: 0.2rem;" v-if="this.param2 === '质检数据'">质检参数——</span>
            <el-select v-model="quality" placeholder="请选择" multiple collapse-tags :multiple-limit="3" v-if="this.param2 === '质检数据'">
              <el-option
                v-for="item in options3"
                :key="item.value + Math.random()"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" size="medium" style="margin-left: 0.3rem;" @click="relationAnalysis">确定</el-button>
          </div>
          <div class="result-1" style="margin-left: 0.3rem;" v-show="this.activeIdx == '1-2'">
            <span>最小支持度——</span>
            <el-input-number size="small" v-model="num1" :min="0.05" :max="0.95" :step="0.05" :step-strictly="true"></el-input-number>
            <span style="display: inline-block;margin-left: 0.2rem;">最小置信度——</span>
            <el-input-number size="small" v-model="num2" :min="0.05" :max="0.95" :step="0.05" :step-strictly="true"></el-input-number>
            <el-button type="primary" size="medium" style="margin-left: 0.3rem;" @click="sureapriorifnc">确定</el-button>
          </div>
          
          <div class="result-2" style="margin-left: 0.3rem;" v-show="this.activeIdx == '2'">
            <span>聚类个数——</span>
            <el-input v-model="param3" oninput="value=value.replace(/[^\d]/g,'');if(value>10)value=10;" placeholder="请输入内容"></el-input>
            <!-- <el-select v-model="param3" placeholder="请选择">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
            </el-select> -->
            <span style="display: inline-block;margin-left: 0.2rem;">数据标准化——</span>
            <el-select v-model="param4" placeholder="请选择">
              <el-option label="Min-Max" value="Min-Max"></el-option>
              <el-option label="Z-score" value="Z-score"></el-option>
            </el-select>
            <el-button type="primary" size="medium" style="margin-left: 0.3rem;" @click="juAnalysis">确定</el-button>
          </div>
          <div class="zhu" v-show="this.activeIdx == '2'">
            <p style="padding: 0 0.3rem;margin-top: 0.2rem;color: #7b7b7b;">
              注：&nbsp; Min-Max： X^'= (X-min)/(max⁡- min) <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;Z-score： X^'= (X-μ)/σ</p>
          </div>
          <div class="result-3" style="margin-left: 0.3rem;display: block;" v-show="this.activeIdx == '3'">
            <span>异常比列——</span>
            <el-select v-model="param5" placeholder="请选择">
              <el-option label="0.1" value="0.1"></el-option>
              <el-option label="0.2" value="0.2"></el-option>
              <el-option label="0.3" value="0.3"></el-option>
              <el-option label="0.4" value="0.4"></el-option>
            </el-select>
            <span style="display: inline-block;margin-left: 0.2rem;">近临范围——</span>
            <el-select v-model="param6" placeholder="请选择">
              <el-option label="ALL" value="ALL"></el-option>
              <el-option label="10" value="10"></el-option>
              <el-option label="20" value="20"></el-option>
              <el-option label="30" value="30"></el-option>
              <el-option label="自定义" value="自定义"></el-option>
            </el-select>
            <el-input v-model="param7" v-if="param6 === '自定义'" oninput="value=value.replace(/[^\d]/g,'');" placeholder="最小值是10"></el-input>
            <el-button type="primary" size="medium" style="margin-left: 0.3rem;" @click="abnormalAnalysis">确定</el-button>
          </div>
        </div>
        <div class="relevanceRank" v-show="this.thisShowIndex == '1-1'">
          <!-- <h3><i class="fa fa-tags"></i>&nbsp;关联度排序</h3> -->
          <el-divider content-position="left">关联度排序&nbsp;&nbsp;
            <el-button type="primary" size="small">
              <a style="color:#eee !important;" :href="guanlianfenxi_href">下载结果</a>
            </el-button>
          </el-divider>
          <div style="display: flex;justify-content: space-around;">
            <div class="rankBox" v-for="(item, index) of this.tableAll_1" :style="{width: (100 / tableAll_1.length - 1) + '%'}" :key="'rr' + index">
              <h3 style="margin-bottom: 0.3rem;text-align: center;">{{ item.name }}</h3>
              <data-tables
                :tableData="item.data"
                :tableTitle="tableAll_thead1"
                :key="'table' + index"
                :height="'5rem'">
              </data-tables>
            </div>
          </div>
          <el-divider content-position="left">结论</el-divider>
          <p style="padding: 0.1rem 0.4rem;" v-for="item of conclusion">{{item}}</p>
        </div>
        <div class="relevanceRank" v-show="this.thisShowIndex == '1-2'">
          <el-divider content-position="left">关联结果&nbsp;&nbsp;
            <el-button type="primary" size="small">
              <a style="color:#eee !important;" :href="guanlianfenxi_2_href">下载结果</a>
            </el-button>
          </el-divider>
          <!-- 展示结果表格 -->
          <el-table
            :data="LLtableData"
            style="width: 76%;margin:0 auto;"
            :height="'6rem'">
            <el-table-column
              prop="support"
              label="support"
              width="180">
            </el-table-column>
            <el-table-column
              prop="itemsets"
              label="itemsets">
            </el-table-column>
          </el-table>
        </div>
        
        <div class="clusterAnalysis" v-show="this.thisShowIndex == '2'">
          <!-- <h3><i class="fa fa-tags"></i>&nbsp;聚类结果</h3> -->
          <el-divider content-position="left">聚类结果&nbsp;&nbsp;<el-button type="primary" size="small"><a style="color:#eee !important;" href="/algorithm_analyze/download_clust_file">下载结果</a></el-button></el-divider>
          <template v-for="(item, index) in tableAll_2">
            <div style="padding: 0.05rem 0.25rem;" :key="item.name">
              <h3 v-if="index <= 4" style="margin-top: 0.1rem;"><i class="fa fa-share-alt-square"></i>&nbsp;{{ item.name }}</h3>
              <br />
              <h3 v-if="index >= 4" style="margin-top: 0.1rem;">{{ item.name2 }}</h3>
              <data-tables :tableData="item.data" :tableTitle="tableAll_thead2" :height="'5rem'"></data-tables>
            </div>
          </template>
        </div>
        <div class="anomalyDetection" v-show="this.thisShowIndex == '3'">
          <!-- <h3><i class="fa fa-tags"></i>&nbsp;异常点</h3> -->
          <el-divider content-position="left">异常点&nbsp;&nbsp;<el-button type="primary" size="small"><el-link :underline="false" href="/algorithm_analyze/dowload_abnormal_file" style="color:#eee !important;">下载结果</el-link></el-button></el-divider>
          <template v-for="item in tableAll_3">
            <div style="padding: 0.05rem 0.25rem;" :key="item.name">
              <h3 style="margin-top: 0.1rem;"><i class="fa fa-share-alt-square"></i>&nbsp;{{ item.name }}</h3>
              <data-tables :tableData="item.data" :tableTitle="tableAll_thead3" :height="'5rem'"></data-tables>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import tab from '../components/tab.vue'
import dataTables from '../components/table.vue'

import navMenu from '../components/navMenu.vue'
export default {
  name: 'algorithm',
  components: {
    tab,
    dataTables,
    
    navMenu
  },
  data () {
    return {
      num1:0.05,
      num2:0.05,
      // activeIdx: 1,
      activeIdx: '1-1',
      thisShowIndex: '0',
      dataIptRadio: 1,
      fileList: [],
      showImg1: false,
      showImg1_2: false,
      showImg2: false,
      imgSrc1: require('./../assets/images/2.png'),
      imgSrc1_2: require('./../assets/images/1-2.png'),
      imgSrc2: require('./../assets/images/4.png'),
      imgSrc3: require('./../assets/images/3.png'),
      eltabs: [
        {id: '1', name: '关联分析'},
        {id: '2', name: '聚类分析'},
        {id: '3', name: '异常检测'}
      ],
      explain: {},
      explain1: {
        '介绍': '灰色关联分析是以因素之间发展趋势的接近程度，作为衡量因素间关联程度的一种方法。若两个因素的变化趋势具有一致性，即同步变化程度较高，则认为二者关联性较强；反之则较低。',
        '输入': '工艺过程数据，质检结果数据。',
        '输出': '关联度'
      },
      explain1_2: {
        '介绍': 'Apriori是经典的挖掘频繁项集和关联规则的数据挖掘算法，使用逐层搜索的迭代方法找到满足指定“频繁”阈值的频繁出现的项集，并挖掘项集之间关系以形成关联规则。',
        '输入': '数据集合，最小支持度，最小置信度',
        '输出': '频繁项集，关联规则'
      },
      explain2: {
        '介绍': '聚类分析是一种无监督学习过程，根据相似性原则，将具有较高相似度的数据对象划分至同一类簇，将具有较高相异度的数据对象划分至不同类簇。k-means算法是应用最广的聚类算法，桉初始聚类数目K，根据距离度量划分数据，并更新聚类中心点，迭代计算直至类中心不变。',
        '输入': '工艺过程数据',
        '输出': '类标签，统计指标'
      },
      explain3: {
        '介绍': 'LOF算法，是一种局部异常点的检测算法，通过计算每个点的邻域内平均密度与该点的密度比值来描述当前点的相对密度，从而判断异常程度。比值越大于1，越有可能是异常点。',
        '输入': '工艺过程数据',
        '输出': '不同邻域范围对应的异常点识别结果'
      },
      quality: [],
      param1: '',
      param2: '',
      options: [
        {value: '过程数据', label: '过程数据'},
        {value: '质检数据', label: '质检数据'}
        // {value: '评价数据', label: '评价数据'}
      ],
      options2: [],
      param3: '',
      param4: '',
      guanlian1: '',
      guanlian2: '',
      guanlian_apriori:'',
      juleifenxi: '',
      yichangjiance: '',
      options3: [
        {value: '缺陷数量荧光', label: '缺陷数量荧光'},
        {value: '缺陷数量X光', label: '缺陷数量X光'},
        {value: '支板疏松-Y', label: '支板疏松-Y'},
        {value: '支板夹杂-Y', label: '支板夹杂-Y'},
        {value: '支板裂纹-Y', label: '支板裂纹-Y'},
        {value: '外环疏松-Y', label: '外环疏松-Y'},
        {value: '外环夹杂-Y', label: '外环夹杂-Y'},
        {value: '外环裂纹-Y', label: '外环裂纹-Y'},
        {value: '内环夹杂-Y', label: '内环夹杂-Y'},
        {value: '表面满天星-Y', label: '表面满天星-Y'},
        {value: '涨壳-Y', label: '涨壳-Y'},
        {value: '支板疏松-X', label: '支板疏松-X'},
        {value: '支板夹杂-X', label: '支板夹杂-X'},
        {value: '支板裂纹-X', label: '支板裂纹-X'},
        {value: '外环疏松-X', label: '外环疏松-X'},
        {value: '外环夹杂-X', label: '外环夹杂-X'},
        {value: '外环裂纹-X', label: '外环裂纹-X'},
        {value: '内环疏松-X', label: '内环疏松-X'},
        {value: '内环夹杂-X', label: '内环夹杂-X'},
        {value: '内环裂纹-X', label: '内环裂纹-X'},
        {value: '安装边夹杂-X', label: '安装边夹杂-X'}
      ],
      tableAll_thead1: [
        {label: '质检参数', prop: 'key'},
        {label: '参数值', prop: 'value'}
      ],
      tableAll_1: [],
      param5: '',
      param6: '',
      param7: '10',
      tableAll_thead2: [],
      tableAll_2: [
        {
          name: '类中值',
          data: []
        },
        {
          name: '类均值',
          data: []
        },
        {
          name: '类中位数',
          data: []
        },
        {
          name: '类众数',
          data: []
        }
      ],
      tableAll_thead3: [],
      tableAll_3: [
        {
          name: '',
          data: []
        }
        // {
        //   name: '共同异常点',
        //   data: []
        // }
      ],
      conclusion: '结论文字',
      guanlianfenxi_href:'/algorithm_analyze/download_guanlianfenxi',
      guanlianfenxi_2_href:'/algorithm_analyze/download_apriori_file',
      LLtableData:[],
      
    }
  },
  methods: {
    // showTab (val) {
    //   this.activeIdx = Number(val)
    //   this.explain = Number(val) === 1 ? this.explain1 : (Number(val) === 2 ? this.explain2 : this.explain3)
    //   this.showImg1 = false
    //   this.showImg2 = false
    //   this.thisShowIndex = 0
    //   // Number(val) === 1 ? (this.showImg1 = true) : (this.showImg2 = true)
    // },
    showTab_navmenu(val){
      this.activeIdx = val
      this.explain = val == '1-1' ? this.explain1 : (val == '2' ? this.explain2 : (val == '1-2' ? this.explain1_2 : this.explain3))
      this.showImg1 = false
      this.showImg1_2 = false
      this.showImg2 = false
      this.thisShowIndex = '0'
      console.log(this.$refs)
      // if(this.$refs.upload){
        this.$refs.upload.clearFiles()
        this.$refs.upload2.clearFiles()
        this.$refs.upload3.clearFiles()
      // }
    },
    
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 上传文件
    httpRequest (file, linkflag = 0) {
      // let file = _file.files[0] // 使用传统的input方法需要加上这一步
      // const types = file.name.split('.')[1]
      // const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
      // if (!fileType) {
      //   alert('格式错误！请重新选择')
      //   return
      // }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          if (this.activeIdx == '2') {
            this.juleifenxi = tabJson[0]['sheet']
          } else if (this.activeIdx == '3') {
            this.yichangjiance = tabJson[0]['sheet']
          }else if(this.activeIdx == '1-2'){
            this.guanlian_apriori = tabJson[0]['sheet']
          }
          
          if (linkflag == '1-1') {
            this.guanlian1 = tabJson[0]['sheet']
          } else if (linkflag == '2') {
            this.guanlian2 = tabJson[0]['sheet']
          }
        }
      })
    },
    // 处理excel
    file2Xce (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        reader.onload = function (e) {
          const data = e.target.result
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          const result = []
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }
        reader.readAsBinaryString(file.raw)
        // reader.readAsBinaryString(file) // 传统input方法
      })
    },
    //  关联分析
    changeBehindSel (val) {
      this.param2 = ''
      this.options2 = []
      if (val === '质检数据') {
        this.options2 = [
          {value: '评价数据', label: '评价数据'}
        ]
      } else if (val === '过程数据') {
        this.options2 = [
          {value: '质检数据', label: '质检数据'},
          {value: '评价数据', label: '评价数据'}
        ]
      }
      
    },
    // 关联分析-比较队列
    changeCompareSel (val){
      if(val === '质检数据' && this.param1 === '过程数据'){
        this.guanlianfenxi_href = '/algorithm_analyze/download_guanlianfenxi?params=1'
      }else {
        this.guanlianfenxi_href = '/algorithm_analyze/download_guanlianfenxi?params=2'
      }
    },
    relationAnalysis () {
      this.thisShowIndex = '1-1'
      this.$api.relationAnalysis({
        'file_qua': JSON.stringify(this.guanlian1),
        'file_pro': JSON.stringify(this.guanlian2),
        'param1': this.param1,
        'param2': this.param2,
        'quality': JSON.stringify(this.quality)
      }).then(res => {
        var result = JSON.parse(res)
        this.tableAll_1 = []
        result.forEach(item => {
          // var _k = Object.keys(Object.values(item)[0])
          // var _v = Object.values(Object.values(item)[0])
          var d = []
          for (var k in Object.values(item)[0]) {
            d.push({key: k, value: Object.values(item)[0][k].toFixed(5)})
          }
          this.tableAll_1.push({data: d, name: Object.keys(item)[0]})
        })
        // var data = Object.values(result)
        // Object.keys(data[0]).forEach(item => {
        //   this.tableAll_1.title.push({label: item, prop: item})
        // })
        // this.tableAll_1.data = data
        
        // 结论文字
        // console.log(this.tableAll_1)
        this.conclusion = []
        for(var i=0;i<this.tableAll_1.length;i++){
          this.conclusion.push(this.tableAll_1[i].name.slice(3)+'：'+this.tableAll_1[i].data[0].key+'，'+this.tableAll_1[i].data[1].key+'，'+this.tableAll_1[i].data[2].key+'，')
        }
      }).catch(res => {
        this.$alert(JSON.parse(res)['msg'], '提示')
      })
    },
    // 关联分析-apriori
    sureapriorifnc (){
      // this.thisShowIndex = '1-2'
      this.$api.apriori({
        'file': JSON.stringify(this.guanlian_apriori),
        'num1': this.num1,
        'num2': this.num2,
      }).then(res => {
        var result = JSON.parse(res)
        // console.log(result)
        this.thisShowIndex = '1-2'
        this.LLtableData = result.data
      }).catch(res => {
        this.$alert(JSON.parse(res)['msg'], '提示')
      })
    },
    //  聚类分析
    juAnalysis () {
      this.thisShowIndex = '2'
      this.$api.clustAnalysis({
        file: JSON.stringify(this.juleifenxi),
        clust_num: this.param3,
        method: this.param4
      }).then(res => {
        var result = JSON.parse(res)
        Object.keys(result[0][0]).forEach(item => {
          this.tableAll_thead2.push({label: item, prop: item})
        })
        this.tableAll_2[0]['data'] = result[0]
        this.tableAll_2[1]['data'] = result[1]
        this.tableAll_2[2]['data'] = result[2]
        this.tableAll_2[3]['data'] = result[3]
        result[4].forEach((item, index) => {
          this.tableAll_2[index + 4] = {
            name: '数据标签',
            name2: '第 ' + (index + 1) + ' 类',
            data: item
          }
        })
      }).catch(res => {
        console.log(res)
        this.$alert(JSON.parse(res)['msg'], '提示')
      })
    },
    //  异常检测
    abnormalAnalysis () {
      this.thisShowIndex = '3'
      this.$api.abnormalAnalysis({
        file: JSON.stringify(this.yichangjiance),
        rate: this.param5,
        u: this.param7 !== '' ? this.param7 : this.param6
      }).then(res => {
        this.tableAll_3 = []
        var result = JSON.parse(res)
        Object.keys(result[0][0]).forEach(item => {
          this.tableAll_thead3.push({label: item, prop: item})
        })
        if (result.length === 1) {
          var p = this.param6 === '自定义' ? this.param7 : this.param6
          this.tableAll_3.push({
            name: 'n = ' + p,
            data: result[0]
          })
        } else {
          this.tableAll_3 = [
            {
              name: 'n = 10',
              data: result[0]
            },
            {
              name: 'n = 20',
              data: result[1]
            },
            {
              name: 'n = 30',
              data: result[2]
            },
            {
              name: '共同异常点',
              data: result[3]
            }
          ]
        }
      }).catch(res => {
        this.$alert(JSON.parse(res)['msg'], '提示')
      })
    },
    clickImg () {
      // this.showImg = !this.showImg
      // this.activeIdx === '1-1' ? (this.showImg1 = !this.showImg1) : (this.showImg2 = !this.showImg2)
      if(this.activeIdx == '1-1'){
        this.showImg1 = !this.showImg1
      }else if(this.activeIdx == '1-2'){
        this.showImg1_2 = !this.showImg1_2
      }else {
        this.showImg2 = !this.showImg2
      }
    }
  },
  mounted () {
    // this.showTab('1')
    this.showTab_navmenu('1-1')
  }
}
</script>

<style lang="scss" scoped="scoped">
#algorithm >>> .el-radio.is-bordered {
  border-color: #a9adb5;
}
#algorithm >>> .el-radio.is-bordered.is-checked {
  background: #e7eff7;
  border-color: #409EFF!important;
}
#algorithm {
  width: 65%;
  padding: 0.3rem;
  position: relative;
  margin: 0.2rem auto;
  background: #FFFFFF;
  >>> .el-divider__text {
    font-size: 0.22rem;
  }
  >>> .el-divider {
    background-color: #9c9d9e;
  }
  >>> .sc-table {
    margin-top: 0.1rem;
  }
  >>> .el-tabs__item {
    font-size: 0.22rem;
    font-weight: 800;
  }
  .tab {
    position: absolute;
    left: -1.5rem;
    
    width: 1.37rem;
    overflow: hidden;
    >>> .el-tabs__item {
      height: 0.7rem;
      line-height: 0.7rem;
    }
  }
  .analysis {
    margin-top: 0.1rem;
    h3 {
      font-size: 0.18rem;
      font-weight: 800;
    }
    .descript {
      div.miao {
        margin-top: 0.2rem;
        font-size: 0.16rem;
        line-height: 0.22rem;
        padding: 0.01rem 0.3rem;
        overflow: hidden;
        p {
          display: block;
          float: left;
          b {
            font-weight: 800;
          }
        }
        span {
          float: left;
          display: block;
          width: 94%;
        }
      }
    }
    .result {
      margin-top: 0.1rem;
      >>> .el-divider--horizontal {
        margin-top: 0.6rem;
        margin-bottom: 0.5rem;
        background-color: rgba(100, 101, 104, 0.75);
      }
      .option {
        margin-top: 0.15rem;
        overflow: hidden;
        // padding: 0.01rem 0.3rem;
        b {
          font-size: 0.18rem;
          vertical-align: middle;
        }
        >>> .upload-demo {
          display: inline-block;
        }
      }
      .relevanceRank {
        padding: 0.15rem 0;
        >>> .el-row {
          display: none;
        }
        .rankBox {
          padding: 0.2rem 0.3rem;
        }
      }
      .clusterAnalysis, .anomalyDetection {
        padding: 0.15rem 0;
      }
      .result-1 {
        display: inline-block;
        // width: 80%;
      }
      .result-2, .result-3 {
        display: inline-block;
        // width: 80%;
        >>> .el-input {
          width: 26%;
        }
        >>> .el-select {
          .el-input {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
